<template>
  <div class="page">
    <div class="bannerTop">
      <img style="width: 100%;height: 376rpx" mode="widthFix"
             src="https://www.linqinghu.cn/ruixiang/static/img/index/indexBanner.jpg"/>
      <div class="head-serch-box flex-row flex-y-center">
        <div @click="toggleShowSelect" class="select-box flex-grow-0 flex-x-center flex-y-center">
          {{selectList[selectedIndex]}}
          <img mode="widthFix" style="width:20rpx;margin-left: 20rpx" src="/images/icon-sort-down.png"/>
          <div v-if="hidden" class="selectlist">
              <div @click.stop="selectClick(index)" v-for="(item,index) in selectList" :key="index"  :class="index == selectedIndex ? 'active' : ''">{{item}}</div>
          </div>
        </div>
        <div bindtap="toSearch" class="flex-grow-1 flex-y-center">
          <img mode="widthFix" style="width: 30rpx;margin-left: 30rpx;margin-right:10rpx;" src="/images/icon-search.png"/>
          请输入小区关键字
        </div>
      </div>
    </div>
    <div class="moduleBox flex-list">
      <block v-for="(item,index) in tenModule" :key="index">
        <div class="nodule_item flex-grow-0 flex-y-center flex-x-center flex-col">
          <img mode="widthFix" style="width:95rpx;height: 95rpx" :src="item.icon">
          <div>{{item.title}}</div>
        </div>
      </block>
    </div>

    <div>
      <swiper style="height: 260rpx"
              indicator-active-color="red"
              indicator-dots="true"
              autoplay="true"
              interval="2000"
              duration="500"
              circular="true"
      >
        <block v-for="(item,index) in bannerList" :index="index" :key="index">
          <swiper-item>
            <img :src="item" class="slide-image" style="width: 100%" mode="widthFix">
          </swiper-item>
        </block>
      </swiper>
    </div>

    <div class="list-title flex-row flex-y-center">
      <div class="flex-grow-1">
        <div class="flex-grow-0 left-title flex-y-center">
          <div class="shuxing"></div>
          推荐二手房
        </div>

      </div>
      <div class="flex-grow-1 flex-y-center right-title flex-right">
        <div class="flex-grow-0 flex-y-center" @click="toMore">
          更多
          <image mode="widthFix" style="width: 16rpx;margin-left: 6rpx" src="/images/icon-jiantou-r.png"></image>
        </div>
      </div>
    </div>

    <house-list :item="item" v-for="(item,index) in houseList" :key="index"></house-list>
  </div>
</template>

<script>
  let cdn='https://www.linqinghu.cn/ruixiang';
  import {URI_GETSMALLHOUSELIST} from "../../utils/api";
  import HouseList from 'src/components/TwoRowList'
  export default {
    components:{HouseList},
    data() {
      return {
        selectList: ['二手房', '租房', '新房'],
        selectedIndex: 0,
        hidden: false,
        tenModule: [
          {icon: cdn + '/static/img/index/index01.png', title: '二手房', toUrl: '/pages/houseList/houseList?label=0'},
          {icon: cdn + '/static/img/index/index02.png', title: '租房', toUrl: '/pages/houseList/houseList?label=1'},
          {icon: cdn + '/static/img/index/index07.png', title: '新楼盘', toUrl: '/pages/houseList/houseList?label=2'},
          {
            icon: cdn + '/static/img/index/index08.png',
            title: '贷款计算',
            toUrl: "/pages/webdiv/webdiv"
          },
        ],
        bannerList: [
          cdn + '/static/img/index/ad1.jpg', cdn + '/static/img/index/ad2.png', cdn + '/static/img/index/ad3.jpg'
        ],
        houseList: []
      }
    },

    methods: {
      toggleShowSelect() {
        this.hidden = !this.hidden
      },
      selectClick(index) {
        this.selectedIndex = index;
        this.hidden = false
      },
      toSearch() {

      },
      toMore(){

      },
    },

    created() {
      // 调用应用实例的方法获取全局数据
      this.$ajax.get(URI_GETSMALLHOUSELIST, {
        type: 1
      }, {}, res => {
        this.houseList=res.data;
      })
    }
  }
</script>

<style scoped>
  .bannerTop{
    position: relative;
  }
  .head-serch-box{
    position: absolute;
    bottom: 40rpx;
    width: 622rpx;
    height: 64rpx;
    background: rgba(255, 255, 255, .9);
    border: 1px solid #ddd;
    border-radius: 4px;
    left: 50%;
    font-size: 28rpx;
    transform: translateX(-50%);
    color: #777;
  }
  .select-box{
    width: 84px;
    height: 100%;
    border-right: 1px solid #ddd;
    color: #333;
    position: relative;
  }

  .selectlist{
    width: 100%;
    position: absolute;
    left: 0;
    top: 80rpx;
    text-align: center;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 4px;
    line-height: 48rpx;
    padding: 10rpx 0;
  }
  .selectlist .active{
    color:red;
  }

  .moduleBox {
    font-size: 26rpx;
    padding: 30rpx 40rpx 10rpx;
    margin-top: 5rpx;
    margin-bottom: 15rpx;
    color: #2c2c2c;
    background: #fff;
  }
  .moduleBox .nodule_item {
    width: 150rpx;
    text-align: center;
    background: #fff;
  }
  .moduleBox .nodule_item > div {
    margin-top: 10rpx;
    margin-bottom: 20rpx;
  }
  .list-title {
    height: 99rpx;
    background: #fff;
    border-bottom: 1rpx solid #eaeaea;
    border-top: 15rpx solid #ececec;
    padding-left: 17rpx;
    padding-right: 25rpx;
  }
  .list-title .shuxing {
    display: inline-block;
    width: 8rpx;
    height: 39rpx;
    background: #3593e3;
    margin-right: 20rpx;
  }
  .list-title .left-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #323232;
  }
  .list-title .right-title {
    font-size: 28rpx;
    color: #6b6b6b;
  }

</style>
